{{ template "head" .Global}}

<!--DataTables example-->
<div id="table-datatables">
    <h4 class="header"><a href="#add_vpn_list" class="btn dropdown-button waves-effect waves-light modal-trigger"
                          style="float:right">添加</a>


    </h4>

    <div class="row">
        <div class="col s12 m12 l12">
            <table id="data-table-simple" class="responsive-table display" cellspacing="0">

                <thead>
                <tr>
                    <th>VpnId</th>
                    <th>Vpn名称</th>
                    <th>Vpn标签</th>
                    <th>添加时间</th>
                    <th>编辑</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>


                {{ range $k,$v :=$.VpnListAll}}
                <tr>
                    <td>{{$v.id}}</td>
                    <td>{{$v.vpn_name}}</td>
                    <td>{{$v.vpn_labelling}}</td>
                    <td>{{$v.create_time}}</td>
                    <td><a a href="#" class="btn dropdown-button waves-effect waves-light "
                           onclick="port_edit_vpn_list()">编辑</a></td>
                    <td onclick="sys_port_del_vpn_list(this,{{$v.id}})">
                        <a a href="#" class="btn dropdown-button waves-effect waves-light ">删除</a>
                    </td>
                </tr>
                {{ end }}
                </tbody>
            </table>
        </div>
    </div>
</div>
<br>


</div>
<!-- Floating Action Button -->
<div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
    <a class="btn-floating btn-large">
        <i class="mdi-action-stars"></i>
    </a>
    <ul>
        <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a>
        </li>
        <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a>
        </li>
        <li><a href="app-calendar.html" class="btn-floating green"><i
                class="large mdi-editor-insert-invitation"></i></a></li>
        <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
    </ul>
</div>
<!-- Floating Action Button -->
</div>
<!--end container-->

</section>
<!-- END CONTENT -->


<div id="add_vpn_list" class="modal">
    <form method="post" role="form" action="">
        <div class="modal-content">
            <div class="row">
                <p>
                    <strong>添加Vpn信息</strong>
                </p>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <input type="text" name="vpn_name" id="vpn_name">
                    <label for="vpn_name">VPN名称</label>
                </div>
                <div class="input-field col s6">
                    <input type="text" name="vpn_labelling" id="vpn_labelling">
                    <label for="vpn_labelling">VPN标签</label>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <a class="waves-effect waves-red btn-flat modal-action modal-close">关闭</a>
            <a type="submit" class="waves-effect waves-green btn-flat modal-action" onclick="sys_post_add_vpn_list()">保存</a>
        </div>
    </form>
</div>


{{ template "foot" .Global}}
<script type="text/javascript" src="/statics/js/function.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="/statics/js/plugins/jquery-1.11.2.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="/statics/js/materialize.min.js"></script>
<!--prism-->
<script type="text/javascript" src="/statics/js/plugins/prism/prism.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="/statics/js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- data-tables -->
<script type="text/javascript" src="/statics/js/plugins/data-tables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/statics/js/plugins/data-tables/data-tables-script.js"></script>
<!-- chartist -->
<script type="text/javascript" src="/statics/js/plugins/chartist-js/chartist.min.js"></script>
<!--sweetalert -->
<script type="text/javascript" src="/statics/js/plugins/sweetalert/sweetalert.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="/statics/js/plugins.min.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="/statics/js/custom-script.js"></script>
<script type="text/javascript">
    /*Show entries on click hide*/
    $(document).ready(function () {
        $(".dropdown-content.select-dropdown li").on("click", function () {
            var that = this;
            setTimeout(function () {
                if ($(that).parent().hasClass('active')) {
                    $(that).parent().removeClass('active');
                    $(that).parent().hide();
                }
            }, 100);
        });
    });
</script>
</body>

</html>